<template>
  <div class="home">
    <van-search
      v-model="value"
      shape="round"
      fixed
      background="#4fc08d"
      placeholder="请输入搜索关键词"
      @click="$router.back('/search')"
    />

    <van-tabs :before-change="get_cade_id">
      <van-tab v-for="(index, i) in list" :title="index.name" :key="i">
      </van-tab>
    </van-tabs>

    <div class="banner" v-for="item in b">
      <span>{{ item.title }}</span>
      <van-grid :border="false" :column-num="1">
        <van-grid-item v-for="item2 in item.imageSrc">
          <van-image :src="item2" />
        </van-grid-item>
      </van-grid>
      <p>{{ item.author }} 评论{{ item.time | get_time }}</p>
    </div>

    <div class="footer">
      <van-tabbar
        v-model="active"
        active-color="#4fc08d"
        inactive-color="#000"
        fixed
      >
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="search" to="/publish">发布</van-tabbar-item>
        <van-tabbar-item icon="friends-o" replace to="/my"
          >我的</van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import { Search } from "vant";
import { Tab, Tabs } from "vant";
import { Image } from "vant";
import { Grid, GridItem } from "vant";
// import { Tabbar, TabbarItem } from 'vant';

export default {
  name: "Home",
  data() {
    return {
      value: "",
      name: "",
      active: "",
      fixed: true,
      list: [],
      a: "",
      b: [],
    };
  },
  components: {
    [Search.name]: Search,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Image.name]: Image,
    //  [Tabbar.name]:Tabbar,
    //  [TabbarItem.name]:TabbarItem
  },
  filters: {
    get_time(v) {
      console.log(v);
     return new Date(v).getFullYear() +
        "-" +
        (new Date(v).getMonth() + 1) +
        "-" +
        new Date(v).getDate();
    },
  },
    mounted() {
      this.get_Data();
      this.get_cate();
    },
    methods: {
      get_cate() {
        this.$http.post("/api/get_cate_list").then((res) => {
          console.log(res);
          console.log(res.data);
          this.list = res.data;
        });
      },
      get_cade_id(index) {
        this.a = this.list[index]._id;
        this.get_Data();
        return true;
      },
      get_Data() {
        this.$http
          .post("/api/get_article_list", {
            cate_id: this.a || "610128169b33ed00018ed5df",
          })
          .then((res) => {
            console.log(res.data);
            this.b = res.data;
          });
      },
    },
};
</script>

<style lang="less">
.grid:hover {
  // text-decoration: underline;
  // padding-top:5px ;
  padding-top: 2px;
  border-bottom: 2px solid green;
}

::v-deep .van-tabs--line {
  border-bottom: 1px solid #999;
}
::v-deep .van-tabs--line {
  bottom: 5.2vw;
  width: 3.6667vw;
}

.banner {
  margin-top: 10px;
}
.banner p {
  color: #ccc;
}
.banner p,
span {
  padding-left: 15px;
}
.footer {
  margin-top: 50px;
}
</style>